import React,{useState} from 'react'
import Bottom from './Bottom'
import './App.css'
import {
  Form,
  Input,
  TextArea,
  Dialog,
  Picker,
  Space,
  Button
} from 'antd-mobile'
import { DownOutline } from 'antd-mobile-icons'


const Publish = () => {
  const [form] = Form.useForm()
  const onSubmit = () => {
    //未完成：先校验是否都不空在显示提交成功
    Dialog.alert({
      content:'提交成功'
    })
    // const values = form.getFieldsValue()
    // Dialog.alert({
    //   content: JSON.stringify(values),
    // })
  }



  return (
    <div>
      <h3>发布主题</h3>
    <Form
      form={form}
      footer={
        <Button block color='primary' onClick={onSubmit} size='large'>
          提交
        </Button>
      }>
    <Form.Item name='板块'>
      <MobileField/>
      {/* 选择板块：<select name="plate" id="plate" >
        <option defaultValue hidden >请选择</option>  
        <option value="study">学习</option>
        <option value="healthy">健康</option>
        <option value="life">生活</option>
        <option value="fun">娱乐</option>
      </select> */}
      </Form.Item>
      <Form.Item
          name='标题'
          minlength={10}
          rules={[{ message: '标题不能为空', }]}
        >
          {/* 如何进行校验10个字符？？ */}
          <Input style={{ border:"1px solid #ccc",boxShadow:"-0.5px -0.5px"}} placeholder='标题字数10字以上' type="text" />
        </Form.Item>
        <Form.Item name='文本域'>
          <TextArea style={{ border:"1px solid #ccc"}} placeholder='请输入内容' rows={10} />
        </Form.Item>
        
    </Form>
        <div className="bottom"><Bottom/></div>
    </div>
  )
}



const columns = [['学习', '健康', '生活', '娱乐']]
const MobileField=({
  value = { preValue: '请选择', realValue: '' },
  onChange,
})=>{
  const [visible, setVisible] = useState(false)

  const triggerValue = (changedValue) => {
    onChange?.({ ...value, ...changedValue })
  }
  // 不是很想看懂···
  const onPreValueChange = (value) => {
    const v = value[0]
    if (v === null) return
    triggerValue({ preValue: v })
  }
  return (
    <div>
      选择板块：<Space align='center' style={{ display:'inline-block',border:"1px solid #ccc"}}>
        <Space
         align='center' onClick={() => setVisible(true)}>
          <div style={{width:'70px'}}>{value.preValue}</div>
          <DownOutline />
        </Space>
      </Space>
      <Picker
        columns={columns}
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
        value={[value.preValue]}
        onConfirm={onPreValueChange}
      />
    </div>
  )
}


export default Publish